<script lang="ts" setup>
import {onMounted, ref} from "vue";
import perfumeList from '@/components/PerfumeShowList.vue'
import axios from "axios";
import router from "@/router";

const searchContent = ref('')
const searchOptions = [
  '香水',
  '配料',
  '品牌'
]
const searchOption = ref("香水")
//是否登录
const isLogin = ref(false)
//是否显示登录对话框
const isShowLogin = ref(false)

//最新发布列表
const latestPublishList = ref([])

//访问量最高的
const viewMaxList = ref([])

//检查是否登录
const checkLogin = () => {
  isLogin.value = true
}

//个人中心
const goMyPage = () => {

}
//显示登录提示框
const showLogin = () => {

}
const search = () => {
  console.log(searchContent.value)
}
//创建香水档案
const createInfo = () => {

}
const perfumerCount = ref(0)//香水数量
const brandCount = ref(0)//品牌数量
const ingredientCount = ref(0)//原料数量

const initLatest = () => {
  axios.post("/api/perfume/latest",{},{
    headers:{
      token:localStorage.getItem("wiki-auth-token")
    }
  })
      .then(res => {
        // console.log(res)
        const msg = res.data.message
        latestPublishList.value = msg
      })
}
const viewLatest = () => {
  axios.post("/api/perfume/viewMax",{},{
    headers:{
      token:localStorage.getItem("wiki-auth-token")
    }
  })
      .then(res => {
        console.log(res)
        const msg = res.data.message
        viewMaxList.value = msg
      })
}
const initData = () => {
  axios.post("/api/other/list",{},{
    headers:{
      token:localStorage.getItem("wiki-auth-token")
    }
  })
      .then(res => {
        console.log(res)
        const msg = res.data.message
        perfumerCount.value = msg[0]
        brandCount.value = msg[1]
        ingredientCount.value = msg[2]
      })
}
const goSearch = () => {
  console.log(searchOption.value)
  if(searchOption.value == "香水"){
    router.push("/perfume?name="+searchContent.value)
  }else if(searchOption.value == "配料"){
    router.push("/ingredient?name="+searchContent.value)
  }else{
    router.push("/bland?name="+searchContent.value)
  }
}
onMounted(() => {
  checkLogin()
  initLatest()
  viewLatest()
  initData()
})
</script>

<template>
  <div class="index-main">
    <div class="navbar-title cursor-pointer" @click="createInfo">
      您希望我们为您推荐个性化香水并保存您最喜欢的香水吗？ 创建您的香水档案！
    </div>
    <!--  https://player.vimeo.com/video/935912450?autoplay=1&controls=0&muted=1&loop=1&title=0&portrait=0&pip=0&byline=0&background=1-->

    <KeepAlive>
      <q-parallax :height="500" class="parallax">
        <template v-slot:media>
          <video :height="600" autoplay e loop muted poster="/index/staticImg.png">
            <source src="http://localhost:8079/img/7EDE3ECB-9246-4EAA-81F2-01294A9714F6.MP4" type="video/webm">
            <source src="http://localhost:8079/img/7EDE3ECB-9246-4EAA-81F2-01294A9714F6.MP4" type="video/mp4">
          </video>
        </template>
      </q-parallax>
    </KeepAlive>

    <div class="d-flex align-item-center justify-content-center flex-column mt-3">
      <h3>Wikiparfum</h3>
      <div class="body-title d-flex align-item-center justify-content-center mt-2 text-center">探索香水爱好者的数字平台。
        使用我们的搜索引擎，了解更多关于香水、原料、品牌或整个香水世界的信息。
      </div>
      <div class="d-flex align-item-center justify-content-center mt-2">
        <q-select v-model="searchOption" :options="searchOptions" label="Standard"/>
        <q-input v-model="searchContent" color="teal" filled label="搜索" outlined @keyup.enter="goSearch">
          <template v-slot:append>
            <q-icon name="search"/>
          </template>
        </q-input>
      </div>
    </div>
    <perfumeList :perfumeList="latestPublishList" title="最新发布"/>
    <perfumeList :perfumeList="viewMaxList" title="访问量最高的"/>
    <div class="middle-box">
      <div class="left-box">
        <div class="text-h3">我们带您走进香水世界</div>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 30px;">
          <div class="num-item">
            <view class="text-h2">
              +{{ perfumerCount }}
            </view>
            <view class="text-caption" style="margin-top: 20px;">香水</view>
          </div>
          <q-separator/>
          <div class="num-item">
            <view class="text-h2">
              +{{ ingredientCount }}
            </view>
            <view class="text-caption" style="margin-top: 20px;">配料</view>
          </div>
          <q-separator/>
          <div class="num-item">
            <view class="text-h2">
              +{{ brandCount }}
            </view>
            <view class="text-caption" style="margin-top: 20px;">品牌</view>
          </div>

        </div>
        <div class="d-flex justify-content-center align-item-center">
          <q-btn color="black"  label="更多信息" stack stretch
                 style="width: 200px;padding-top: 5px;padding-bottom: 5px;margin-top: 40px;"/>
        </div>
      </div>
      <q-img
          src="/index/bg-m.png"
          style="max-width:30vw;height: 80vh"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index-main {
  background-color: #f8f6f3;
  width: 100vw;
  padding-bottom: 5vh;

  .parallax {
    width: 100vw;
  }

  .navbar-title {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #008f8b;
  }

  .num-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    margin: 30px;
  }

  .body-title {
    font-size: 16px;
    width: 70vw;
  }

  .middle-box {
    height: 100vh;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-box {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
    }
  }
}


</style>